 
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>基于 layui 的极简社区页面模版</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" content="fly,layui,前端社区">
  <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
  <link rel="stylesheet" href="../res/layui/css/layui.css">
  <link rel="stylesheet" href="../res/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
  <div class="layui-container">
    <a class="fly-logo" href="/">
      <img src="../res/images/logo.png" alt="layui">
    </a>
    
    <ul class="layui-nav fly-nav-user">
      <li class="layui-nav-item">
        <a class="fly-nav-avatar" href="javascript:;">
          <cite class="layui-hide-xs" id="user-name"></cite>
          <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
          <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
          <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
        </a>
        <dl class="layui-nav-child">
          <dd><a href="user/set.html"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
          <dd><a href="user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
          <dd><a href="user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
          <hr style="margin: 5px 0;">
          <dd><a href="/users/logout" style="text-align: center;">退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

<div class="fly-panel fly-column">
  <div class="layui-container">
    <ul class="layui-clear">
      <li class="layui-hide-xs layui-this"><a href="/">首页</a></li> 
      <!-- <li><a href="jie/index.html">提问</a></li>  -->
      <!-- <li><a href="jie/index.html">分享<span class="layui-badge-dot"></span></a></li>  -->
      <!-- <li><a href="jie/index.html">讨论</a></li>  -->
      <!-- <li><a href="jie/index.html">建议</a></li>  -->
      <li><a href="jie/index.html">公告</a></li> 
      <li><a href="jie/index.html">动态</a></li> 
      <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><span class="fly-mid"></span></li> 
      
      <!-- 用户登入后显示 -->
      <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block"><a href="user/index.html">我的对局</a></li> 
    </ul> 
    
    <div class="fly-column-right layui-hide-xs"> 
      <span class="fly-search"><i class="layui-icon"></i></span> 
      <a href="jie/add.html" class="layui-btn">新建对局</a> 
    </div> 
    <div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;"> 
      <a href="jie/add.html" class="layui-btn">发表新帖</a> 
    </div> 
  </div>
</div>

<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md">

      <div class="fly-panel" style="margin-bottom: 0;">
        
        <div class="fly-panel-title fly-filter">
          <a href="" class="layui-this">综合</a>
          <span class="fly-mid"></span>
          <a href="">未结</a>
          <span class="fly-mid"></span>
          <a href="">已结</a>
          <span class="fly-mid"></span>
          <a href="">精华</a>
        </div>

        <ul class="fly-list" id="fly-list">          
          <!-- <li>
            <a href="user/home.html" class="fly-avatar">
              <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
            </a>
            <h2>
              <a class="layui-badge">进行中</a>
              <a href="jie/detail.html">范群星执黑 -- 洪细英执白</a>
            </h2>
            <div class="fly-list-info">
              <a href="user/home.html" link>
                <cite>范群星</cite>
              </a>
              <span>刚刚</span>
              <span class="layui-badge fly-badge-accept layui-hide-xs">黑胜 7目</span>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</div>
 
<script src="../res/layui/layui.js"></script>
<script>
layui.cache.page = '';
layui.cache.user = {
  username: '游客'
  ,uid: -1
  ,avatar: '../res/images/avatar/00.jpg'
  ,experience: 83
  ,sex: '男'
};
layui.config({
  version: "3.0.0"
  ,base: '../res/mods/' //这里实际使用时，建议改成绝对路径
}).extend({
  fly: 'index'
}).use('fly');
</script>
<script>
layui.use(['form', 'ajax'], function() {
  var form = layui.form;
  var ajax = layui.ajax;
  var $ = layui.jquery;
  var roomStatusMap = {
    10: '已创建',
    20: '等待中',
    30: '已就坐',
    40: '已开始',
    50: '已结束'
  };

  ajax({
    url: '/room/getRoomList',
    method: 'get',
    success: function(res) {
      console.log(res);
      renderRooms(res);
    }
  });

  function renderRooms(res) {
    var html = '';
    for (var i = 0; i < res.length; i++) {
      var item = res[i];
      if (!item.whiteName || !item.blackName) {
        html += '\
        <li>\
          <a href="user/home.html" class="fly-avatar">\
            <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">\
          </a>\
          <h2>\
            <a class="layui-badge">'+roomStatusMap[item.roomStatus]+'</a>\
            <a href="jie/detail.html?roomid='+item.id+'">等待加入</a>\
          </h2>\
          <div class="fly-list-info">\
            <a href="user/home.html" link>\
              房主 <cite>'+item.roomOwnerName+'</cite>\
            </a>\
            <span class="layui-badge fly-badge-accept layui-hide-xs">黑胜 7目</span>\
          </div>\
        </li>'
      } else {
        html += '\
        <li>\
          <a href="user/home.html" class="fly-avatar">\
            <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">\
          </a>\
          <h2>\
            <a class="layui-badge">'+roomStatusMap[item.roomStatus]+'</a>\
            <a href="jie/detail.html?roomid='+item.id+'">'+item.blackName+'执黑 -- '+item.whiteName+'执白</a>\
          </h2>\
          <div class="fly-list-info">\
            <a href="user/home.html" link>\
              房主 <cite>'+item.roomOwnerName+'</cite>\
            </a>\
            <span class="layui-badge fly-badge-accept layui-hide-xs">黑胜 7目</span>\
          </div>\
        </li>';
      }
    }
    $("#fly-list").html(html);
  }
});
</script>

<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script>

</body>
</html>